<template>
	<view class="list" v-if="list.length">
		<view class="list-item" v-for="item in list" @click="handleSelect(item)">
			<view class="u-flex u-font-xl u-row-between">
				<view class="waiter-top">
					{{item.fullName}}
					<u-tag class="tag" mode="light" :type="item.takeOrdersWay==1?'warning':'success'" :text="item.takeOrdersWay==1?'手动接单':'自动接单'"></u-tag>
				</view>
				<!-- <u-tag class="tag" mode="light" type="warning" text="10单"></u-tag> -->
				<view class="tag-selected" :style="{'backgroundColor':item.selected?'#FF490F':'#e5e5e5'}">
					{{item.selected?'已选择':'未选择'}}
				</view>
			</view>
			<view class="u-flex u-row-between">
				<view style="line-height: 50rpx;">
					<view class="u-font-29">
						昵称:{{item.name}}
					</view>
					<view class="">
						类型:{{item.waiterType==1?"专属":"公共"}}
					</view>
					<view class="" style="color:#767879">
						{{(item.timing>0?'已经下班':'距离下班')+Math.abs(item.timing)+'分钟'}}
					</view>
				</view>
				<view class="order-num">
					{{item.orderNum}}单
				</view>
				<!-- <u-icon size="50" :color="item.selected?'red':'#767879'" name="checkmark-circle"></u-icon> -->
			</view>
		</view>
	</view>
	<view style="margin-top: 300rpx;" v-else>
		<e-empty text="暂无数据" mode="list"></e-empty>
	</view>
	<u-button class="confirm-btn" size="medium" @click="confirmSelect">确定选中</u-button>
</template>
<script setup>
	import {ref,reactive,unref} from "vue"
	import {onLoad} from "@dcloudio/uni-app"
	import waitersApi from "@/api/waiters"
	const list = ref([])
	function handleSelect(val){
		const filterList = unref(list).filter(item=>item.selected)
		// 点击的是已经选中的
		if(unref(list).find(item=>item.id==val.id).selected) return val.selected =false

		// 点击没有选中的
		if(val.takeOrdersWay==2&&filterList.length>0||filterList[0]&&filterList[0].takeOrdersWay==2){
			return uni.showToast({
				icon:"error",
				title:"自动接单只选一个"
			})
		}
		val.selected = !val.selected
	}

	// 确定选择
	async function confirmSelect(){
		const waiters = unref(list).filter(item=>item.selected)
		if(waiters.length==1&&waiters[0].takeOrdersWay==1){
			const {confirm} = await uni.showModal({
				title:"提示",
				content:"强制服务员自动接单吗？"
			})
		}

		uni.$emit("selectWaiters",{waiters,power:confirm?1:0})
		uni.navigateBack()
	}
	// 获取数据
	async function getData(ids,id){
		const {data} = await waitersApi.getWaiterList({orderId:id})
		ids.length&&data.forEach(item=>ids.includes(String(item.id))&&(item.selected=true))
		list.value = data
	}
	onLoad(({ids,id})=>{
		getData(ids.split(","),id)
	})
</script>

<style lang="scss" scoped>
	page::after,page::before{
		content:"";
		display:table;
		clear:both;
	}
	.confirm-btn{
		position: fixed;
		bottom: 60rpx;
		left: 0;
		right: 0;
		margin: auto;
		text-align: center;
		&:deep(button){
			&::after{
				border:none
			}
			color:white !important;
			width: 60% !important;
			background-color: #ffc300 !important;
		}
	}
	.list{
		margin: 20rpx 0;
		padding-bottom: 140rpx;
		.list-item{
			background-color: white;
			margin: 10rpx 0;
			padding: 20rpx;
			box-sizing: border-box;
			overflow: hidden;
			.waiter-top{
				font-weight:bolder;
				margin-bottom: 15rpx;
			}
			.tag-selected{
				width: 200rpx;
				height: 45rpx;
				color:white;
				text-align: center;
				transform: rotate(40deg) translateY(-59rpx) translateX(50rpx);
				// background-color: #FF490F;
				font-size: 27rpx;
				box-sizing: border-box;
				padding-left: 10rpx;
			}
			.tag{
				:deep(.u-tag){
					transform: translateY(-6rpx);
				}
			}
			.order-num{
				font-size: 43rpx;
			}
		}
	}

</style>
